<template>
  <el-tabs type="border-card" :v-model="1" size="small">
    <el-tab-pane name="1" label="样式" style="display: block">
      <el-form :model="form" label-width="80px" style="margin-left: 5px">
        <el-form-item label="线形">
          <el-select @change="handleLine" v-model="selectLine">
            <el-option value="1" label="实线" selected></el-option>
            <el-option value="2" label="虚线"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="箭头">
          <el-select @change="handleArrow" v-model="selectArrow">
            <el-option value="1" label="正向" selected></el-option>
            <el-option value="2" label="逆向"></el-option>
            <el-option value="3" label="双向"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="边框">
          <el-popover placement="bottom" width="200" trigger="click">
            <div class="color-container" slot="reference">
              <div
                class="edit-color"
                :style="{
                  backgroundColor: curEdge.attrs
                    ? curEdge.attrs.line.stroke
                    : '',
                }"
                @click="
                  () => {
                    strokeColorVisible = true;
                  }
                "
              ></div>
            </div>
            <template>
              <el-row style="margin-bottom: 10px">
                <sketch-picker
                  v-model="colors"
                  @input="updateBodyStroke"
                  :preset-colors="presetColors"
                />
              </el-row>
              <!-- <el-row>
                <el-col :span="17">
                  <el-button
                    @click="
                      () => {
                        strokeColorVisible = false;
                      }
                    "
                    >取消</el-button
                  >
                </el-col>
                <el-col :span="7">
                  <el-button type="primary" @click="handleBodyStroke"
                    >确定</el-button
                  >
                </el-col>
              </el-row> -->
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="文本">
          <el-input v-model="curLabel" @input="handleLabel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="24" :style="{ textAlign: 'center' }">
              <el-button type="primary" @click="handleSave">保存</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!--    <el-tab-pane key="2" tab="参数">-->
    <!--      Content of Tab Pane 2-->
    <!--    </el-tab-pane>-->
  </el-tabs>
</template>

<script>
import { message } from "ant-design-vue";
import { Edge } from "@antv/x6";
import { Sketch } from "vue-color";
export default {
  name: "EdgeConfigContainer",
  props: {
    edge: Edge,
  },
  components: {
    "sketch-picker": Sketch,
  },
  data() {
    return {
      colors: { r: 255, g: 0, b: 0 },
      presetColors: [
        "#f00",
        "#00ff00",
        "#00ff0055",
        "rgb(201, 76, 76)",
        "rgba(0,0,255,1)",
        "hsl(89, 43%, 51%)",
        "hsla(89, 43%, 51%, 0.6)",
      ],
      strokeColorVisible: false,
      curBodyStroke: "",
      curEdge: {},
      form: this.$form.createForm(this, { name: "configPanel" }),
      curLabel: "",
      edgeFormData: [],
      selectLine: "1",
      selectArrow: "1"
    };
  },
  methods: {
    // 更新选色器颜色
    updateBodyStroke(v) {
      this.curBodyStroke = v.hex;
      this.curEdge.setAttrs({
        line: {
          stroke: this.curBodyStroke,
        },
      });
    },
    // 更新body的边框色
    handleBodyStroke() {
      this.curEdge.setAttrs({
        line: {
          stroke: this.curBodyStroke,
        },
      });
      this.strokeColorVisible = false;
    },
    // 更新线的虚实
    handleLine(e) {
      console.log(138, e);
      this.selectLine = e
      if (e === 2) {
        this.curEdge.setAttrs({
          line: {
            strokeDasharray: 5.5,
          },
        });
      } else {
        this.curEdge.removeAttrByPath("line/strokeDasharray");
      }
    },
    // 更新箭头
    handleArrow(e) {
      this.selectArrow = e
      switch (e) {
        // 正向箭头
        case 1:
          this.curEdge.setAttrs({
            line: {
              targetMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
            },
          });
          this.curEdge.removeAttrByPath("line/sourceMarker");
          break;
        // 逆向箭头
        case 2:
          this.curEdge.setAttrs({
            line: {
              sourceMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
            },
          });
          this.curEdge.removeAttrByPath("line/targetMarker");
          break;
        // 双向箭头
        case 3:
          this.curEdge.setAttrs({
            line: {
              targetMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
              sourceMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
            },
          });
          break;
      }
    },
    // 在箭头中插入文本
    handleLabel(e) {
      console.log(e)
      this.curEdge.removeLabelAt(0);
      this.curEdge.appendLabel({
        attrs: {
          text: {
            text: e,
          },
        },
      });
      this.curLabel = e;
    },
    // 保存
    handleSave(e) {
      e.preventDefault();
      let beforeLen = this.edgeFormData.length;
      console.log("beforeLen:", this.edgeFormData.length, this.curEdge.attrs);
      let obj = {
        id: this.curEdge.id,
        shape: "bpmn-edge",
        source: this.curEdge.store.data.source.cell,
        target: this.curEdge.store.data.target.cell,
        label: this.curLabel,
        attrs: this.curEdge.attrs,
      };
      this.edgeFormData.push(obj);
      let afterLen = this.edgeFormData.length;
      if (afterLen > beforeLen) {
        message.success("保存成功");
      } else {
        message.warning("保存失败");
      }
      console.log("oldLen:", this.edgeFormData.length);
      this.$emit("updateForm", this.edgeFormData);
    },
  },
  watch: {
    edge(newValue) {
      this.curEdge = newValue;
      this.curLabel =
        this.curEdge.labels && this.curEdge.labels.length
          ? this.curEdge.labels[0].attrs.text.text
          : "";
    },
    curEdge(newValue) {
      this.$emit("updateData", newValue);
    },
  },
};
</script>

<style scoped>
.color-container {
  margin-top: 8px;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 1px solid #dfe3e8;
  border-radius: 2px;
}
.edit-color {
  cursor: pointer;
  height: 100%;
}
</style>
